<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>短信平台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" th:href="@{/vendor/bootstrap/css/bootstrap.min.css}">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" th:href="@{/vendor/font-awesome/css/font-awesome.css}">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" th:href="@{/css/fontastic.css}">
    <!-- Google fonts - Roboto -->
    <!--<link rel="stylesheet" th:href="@{https://fonts.googleapis.com/css?family=Roboto:300,400,500,700}">-->
    <!-- jQuery Circle-->
    <link rel="stylesheet" th:href="@{/css/grasp_mobile_progress_circle-1.0.0.min.css}">
    <!-- Custom Scrollbar-->
    <link rel="stylesheet" th:href="@{/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css}">
    <!-- theme stylesheet-->
    <link rel="stylesheet" th:href="@{/css/style.blue.css}" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" th:href="@{/css/custom.css}">
    <!-- Favicon-->
    <link rel="shortcut icon" th:href="@{/img/favicon.ico}">
    <!--toastr-->
    <link rel="stylesheet" th:href="@{/css/toastr.css}">
    <link rel="stylesheet" th:href="@{/css/zTree/zTreeStyle/bootstrapStyle.css}" type="text/css">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
</head>
<style>
    input.error {
        border: 1px solid red;
    }

    label.error {
        font-weight: bold;
        color: red;
    }

    .lm_dlg .lm_cnt {
        overflow: hidden;
        width: 100%;
        *width: 99%;
        height: 520px;
    }

    .lm_cnt {
        border: 1px solid #B3B3B3;
        background-color: #fff;
    }

    .lm_dlg .lm_panel {
        height: 520px;
    }

    .lm_dlg a.lm_raddr {
        padding: 4px 8px;
    }

    a.lm_addr, a.lm_addr:link, a.lm_addr:visited {
        background: #fff;
        display: block;
        color: #494949;
        text-decoration: none;
        text-align: left;
        height: 20px;
        line-height: 20px;
        padding: 0 0 0 30px;
        white-space: nowrap;
        width: auto;
        text-overflow: ellipsis;
        overflow: hidden;
        cursor: pointer;
        outline: none;
    }

    .lm_raddr .mov {
        float: right;
        margin-top: 2px;
        border: none;
        width: 16px;
        height: 16px;
        cursor: pointer;
    }
</style>


<body>
<!-- Side Navbar -->
<div th:replace="~{/pages/common/side_navbar.html}"></div>

<div class="page" style="padding-bottom: 0px;">
    <!-- navbar-->
    <div th:replace="~{/pages/common/header_navbar.html}"></div>
    <!-- Breadcrumb-->
    <div class="breadcrumb-holder">
        <div class="container-fluid">
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">群组管理</a></li>
            </ul>
        </div>
    </div>
    <!--新增菜单div start -->
    <section class="forms">
        <div class="container-fluid">
            <div class="col-lg-12 mt-3">
                <div class="card">
                    <div class="card-header d-flex align-items-center" th:if="${#lists.size(data)>0}">
                        <h4><p th:text="${group.groupName}+ -编辑通讯录用户"></p></h4>
                    </div>
                    <div class="card-header d-flex align-items-center" th:if="${#lists.size(data)<=0}">
                        <h4><p th:text="${group.groupName}+ -添加通讯录用户"></p></h4>
                    </div>
                    <!--数据字段-->
                    <div class="card-body">
                        <form class="form-horizontal" th:action="@{/sys/groupUser/save}" method="post">
                            <table border="0" cellspacing="0" cellpadding="3" align="center"
                                   style="width: 80% !important;">
                                <tbody>
                                <tr>
                                    <td colspan="3" align="left">
                                        <div id="qmaddrOut" class="lm_dlg" style="background:none;height:610px;">
                                            <div style="text-align:left; height:610px;width:80%">
                                                <table width="93%" border="0" align="center" cellpadding="0"
                                                       cellspacing="0"
                                                       style="table-layout:fixed">
                                                    <tbody>
                                                    <tr>
                                                        <td
                                                                style="width:20%;font-size:14px;font-weight:bold;padding:12px 0 3px 0;">
                                                            通讯录<span id="totleNum"></span></td>
                                                        <td style="width:5%">&nbsp;</td>
                                                        <td style="width:20%;font-size:14px;font-weight:bold;padding:12px 0 3px 0;">
                                                            已有联系人<span id="selectNum"></span>&nbsp;
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <div class="bd_upload lm_cnt" id="left">
                                                                <div class="lm_panel"
                                                                     style="overflow-y:auto;white-space:pre-wrap">
                                                                    <ul id="treeDemo" class="ztree"></ul>
                                                                    <input type="hidden" id="treeList"
                                                                           th:value="${tree}">
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td align="center"><img th:src="@{/img/left.jpg}"
                                                                                style="width: 12px"
                                                                                height="16px">
                                                        </td>
                                                        <td>
                                                            <div id="right" class="bd_upload lm_cnt"
                                                                 style="overflow-y:auto;">
                                                                <div th:each="data,loopStatus:${data}">
                                                                    <a th:id="${data.userPhone}"
                                                                       th:title="${data.userPhone}" nocheck="true"
                                                                       class="lm_addr lm_raddr"
                                                                       th:value="${data.userName}">
                                                                        <input type="button" class="mov"
                                                                               style="background:url(/tjsms/img/delete.png);background-size:100%;">
                                                                        <div style="overflow:hidden;*float:right;">
                                                                            <div style="overflow:hidden;width:100%;"
                                                                                 th:text="${data.userName}">
                                                                            </div>
                                                                        </div>
                                                                    </a>
                                                                </div>

                                                            </div>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <div class="form-group row" style="margin-right: -132px !important;">
                                <div class="col-sm-10 offset-sm-4">
                                    <input type="hidden" th:value="${groupId}" id="groupId">
                                    <a th:href="${url}" class="btn btn-secondary ml-1">返回</a>
                                    <button type="button" id="submitBtn" class="btn btn-success ml-5">提交</button>
                                </div>
                                <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"
                                       th:if="${_csrf}"/>
                                <input type="hidden" th:value="${flag}" id="flag">
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </section>
    <!--新增用户div end -->
</div>
</body>
<!-- JavaScript files-->
<script type="text/javascript" th:src="@{/js/jquery.js}"></script>
<script type="text/javascript" th:src="@{/vendor/popper.js/umd/popper.min.js}"></script>
<script th:src="@{/vendor/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/js/grasp_mobile_progress_circle-1.0.0.min.js}"></script>
<script th:src="@{/vendor/jquery.cookie/jquery.cookie.js}"></script>
<!--<script th:src="@{/vendor/chart.js/Chart.min.js}"></script>-->
<script th:src="@{/js/bootstrapValidator.min.js}"></script>
<script th:src="@{/vendor/jquery-validation/jquery.validate.min.js}"></script>
<script th:src="@{/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js}"></script>
<!--<script th:src="@{/js/charts-home.js}"></script>-->
<!-- Main File-->
<script th:src="@{/js/front.js}"></script>
<script th:src="@{/js/toastr.min.js}"></script>
<script th:src="@{/js/base.js}"></script>
<script type="text/javascript" th:src="@{/js/zTree/jquery.ztree.core.js}"></script>
<script type="text/javascript" th:src="@{/js/zTree/jquery.ztree.excheck.js}"></script>
<script type="text/javascript" th:src="@{/js/zTree/jquery.ztree.exedit.js}"></script>

<script type="text/javascript">

    $(function () {
        toastr.options = {
            closeButton: false, //是否显示关闭按钮（提示框右上角关闭按钮）；
            debug: false, //是否为调试；
            progressBar: false, //是否显示进度条（设置关闭的超时时间进度条）
            positionClass: "toast-top-center", //消息框在页面显示的位置
            onclick: null, //点击消息框自定义事件
            showDuration: "300", //显示动作时间
            hideDuration: "1000", //隐藏动作时间
            timeOut: "2000", //自动关闭超时时间
            extendedTimeOut: "1000",
            showEasing: "swing",
            hideEasing: "linear",
            showMethod: "fadeIn",
            hideMethod: "fadeOut"
        };
        //表单验证
        $("#submitBtn").click(function () {
            debugger;
            var userList = [];
            var groupId = $("#groupId").val();
            var arr = $("#right a");
            for (var i = 0; i < arr.length; i++) {
                var json = {};
                json.userName = arr[i].text.trim();
                json.userPhone = arr[i].title.trim();
                json.groupId = groupId;
                json.userFlag = 0;
                userList.push(json);
            }
            if (userList.length <= 0) {
                toastr.error("选择用户为空");
                return false;
            } else if (userList.length >= 5000) {
                toastr.error("用户数量不可超过5000");
                return false;
            }
            $.requestJsonAjax({
                url: $appName + "/sms/groupUser/save",
                type: "post",
                data: userList,
                success: function (result) {
                    if (result.success) {
                        toastr.success(result.msg);
                        setTimeout(function () {
                            var flag = $("#flag").val();
                            if (flag != null && flag != "" && flag == "groupSend") {
                                window.location.href = $appName + "/sms/sendGroup/sendIndex?groupId=" + groupId;
                            } else {
                                window.location.href = $appName + result.url;
                            }

                        }, 1500)
                    } else {
                        toastr.error(result.msg);
                    }

                }
            })

        })
        //ztree 方法
        var setting = {
            view: {
                showLine: false
            },
            callback: {
                beforeClick: beforeClick,//点击之前调用的方法
                onClick: clickOrg
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        debugger;
        var nodesStr = $("#treeList").val();
        var zNodes = JSON.parse(nodesStr);
        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            $("#right").on("click", "a", function () {
                $(this).remove();
            });

        });

        /**
         * 点击之前进行判断当前节点是否为父节点，若不是则进行提示
         *@param treeId:对应Ztree的treeId
         *@param treeNode:被点击的节点JSON数据对象
         *@param clickFlag:节点被点击之后的选中操作类型 1-普通选中 2-追加选中 0-取消选中
         *@return true/false true： 选中当前节点 false：不选中
         */
        function beforeClick(treeId, treeNode, clickFlag) {
            if (treeNode.isParent) {
                return false;
            } else {
                return true;
            }
        }

        //ztree 节点点击方法
        function clickOrg(event, treeId, treeNode) {
            debugger;
            if (treeNode.type == "user") {
                if ($("#" + treeNode.userPhone).length > 0) {
                    toastr.info("该用户已存在");
                } else {
                    var tab = ' <a id="' + treeNode.userPhone + '" value="' + treeNode.name + '" title="' + treeNode.userPhone + '" nocheck="true" class="lm_addr lm_raddr">' +
                        '<input type="button" class="mov" style="background:url(' + $appName + '/img/delete.png);background-size:100%;";>' +
                        '<div style="overflow:hidden;*float:right;">' +
                        '<div style="overflow:hidden;width:100%;">' + treeNode.name + '</div>' +
                        '</div></a>';
                    $("#right").append(tab);
                    $("#right").trigger("create");

                }
            }

        }

    })

</script>

</html>